
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>秒读书籍精华 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>秒读书籍精华 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在“图书智能解读系统 v1.0”中，为AI设定的核心角色是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">AI被设定为一位“专业的图书分析专家”，擅长深度解读、内容提炼和知识转化，其分析需要系统、深入且具有实用价值。</div>
          </div>
          <div class="card-source">来源: prompt: <role></div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">该解读系统对输出报告定义了哪四个核心的质量衡量标准（quality_metrics）？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">四个核心质量标准是：1. 准确性（内容忠实原著）；2. 系统性（覆盖主要内容和框架）；3. 实用性（突出可操作和可应用的内容）；4. 深度（提供深层次的思考和洞察）。</div>
          </div>
          <div class="card-source">来源: prompt: <quality_metrics></div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">结构</div>
          <div class="card-question">根据输出格式（output_format）要求，“应用价值”部分应该从哪三个层面进行分析？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">结构</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“应用价值”部分需要从三个层面进行分析：个人层面（个人如何应用）、组织层面（组织如何应用）和社会层面（更广泛的应用价值）。</div>
          </div>
          <div class="card-source">来源: prompt: <output_format> - 6. 应用价值</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">结构</div>
          <div class="card-question">在最终的解读报告中，“批判性思考”部分应包含哪些内容？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">结构</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“批判性思考”部分应包含三个方面的内容：书籍的“优点”、存在的“局限”（问题或不足），以及相关的“延伸”阅读建议。</div>
          </div>
          <div class="card-source">来源: prompt: <output_format> - 8. 批判性思考</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">文档中提供的“结构化分析”请求包含哪五个分析要点？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“结构化分析”请求包含五个要点：1. 全书框架；2. 各章节核心内容；3. 章节之间的逻辑关系；4. 关键概念解释；5. 实践建议或行动指南。</div>
          </div>
          <div class="card-source">来源: 文档中「请对《[书名]》进行结构化分析」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">文档中提到的基于用户个人背景的个性化分析可以提供哪些具体内容？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">基于用户背景的个性化分析可以提供：提取最相关的内容、设计个性化学习路径、推荐实践练习、制定应用计划，以及预期可能遇到的障碍和解决方案。</div>
          </div>
          <div class="card-source">来源: 文档中「基于我的背景[具体描述]，请针对《[书名]》」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">“图书智能解读系统 v1.0”的主要目标（objective）是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">其主要目标是创建一份全面且易于理解的图书解读报告，以帮助读者快速把握核心内容，并获取实践指导。</div>
          </div>
          <div class="card-source">来源: prompt: <objective></div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">结构</div>
          <div class="card-question">根据输出格式，“核心观点”部分需要呈现哪三个关键要素？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">结构</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“核心观点”部分需要呈现三个关键要素：主要论点（3-5个核心论点）、支撑证据（每个论点的主要支撑证据）和创新见解（作者的原创性观点）。</div>
          </div>
          <div class="card-source">来源: prompt: <output_format> - 3. 核心观点</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">文档中“请从《[书名]》中提取”这一指令要求提取哪些类型的信息？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该指令要求提取五类信息：最重要的10个关键词、5个核心框架或模型、3个最重要的行动建议、常见误区和解决方案，以及如何将书中内容应用到实践中。</div>
          </div>
          <div class="card-source">来源: 文档中「请从《[书名]》中提取」部分</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
